<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色设置</title>
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/plugins/bootstrap-select/bootstrap-select.min.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">

</head>
<body>
<div class="wrapper">
    <div class="col-sm-12">
        <div class="row">
            <div class="modal-body" style="width: 60%;margin: auto">
                <form class="form-horizontal m-t" id="commentForm" autocomplete="off">
                    <input type="hidden" th:value="${role.roleId}" name="roleId">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">角色名称：</label>
                        <div class="col-sm-8" style="width: 250px">
                            <input type="text" class="form-control" name="roleName" th:value="${role.roleName}" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">权限目录：</label>

                        <div class="col-sm-8">
                            <select class="selectpicker" name="catalogueIds" multiple>
                                <option data-icon="fa fa-folder"  th:each="catalogue,catalogueStat:${catalogueList}" th:value="${catalogue.catalogueId}"
                                        th:text="${catalogue.catalogueName}"
                                        th:disabled="${catalogue.catalogueId eq 1}"
                                        th:selected="${catalogue.catalogueId eq 1}"
                                ></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group form-button" style="margin-top: 20px">
                        <div class="col-sm-12 col-sm-offset-5">
                            <button class="btn btn-success" type="submit">提交</button>
                            <button class="btn btn-default cancel" type="button" >取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-select/bootstrap-select.js}"></script>
<script th:src="@{/js/plugins/bootstrap-select/defaults-zh_CN.js}"></script>
<script th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
<script th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
<script th:src="@{/js/plugins/layer/layer.js}"></script>
<script th:inline="javascript">
    $(function(){

        //设置默认选中的值
        var str = [[${roleCatalogueList}]];
        $('.selectpicker').selectpicker('val',str);

        // validate signup form on keyup and submit
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#commentForm").validate({
            rules: {
                roleName: "required",
                catalogueIds: "required"
            },
            messages: {
                roleName: icon + "请输入角色名称",
                catalogueIds:  icon + "请选择权限目录",
            },
            submitHandler:function(form) {
                var data = $("#commentForm").serialize();
                $.ajax({
                    type:'post',
                    url:[[${ctx}]]+"/role/update.do",
                    cache: false,
                    data:data,
                    dataType:'json',
                    success:function(data){
                        if(data.code === 200){
                            parent.layer.msg('操作成功',{icon: 1});

                        }else{
                            parent.layer.msg('操作失败', {icon: 2});
                        }
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    }
                })
            }
        });
    });

    /**
     * 取消按钮
     */
    $(".cancel").click(function () {
        parent.layer.close(parent.layer.getFrameIndex(window.name));
    });

</script>
</body>
</html>